<script setup>
import { useStore } from "vuex";

// 使用store
const store = useStore();
// 读取state中的counter
// let counter = store.state.counter;
</script>

<template>
	<h1>----HelloVuex的内容----</h1>
	<!-- 通过getters获得state的counter，响应式的，属性方式调用，不添加括号 -->
	<h2>{{ store.getters.getCounter }}</h2>
	<!-- 获得counter的平方 -->
	<h2>counter的平方：{{ store.getters.getPowerCounter }}</h2>
	<!-- 获得年龄大于10的学生 -->
	<h2>年龄大于10的学生：{{ store.getters.getStudentAgeBeyond10 }}</h2>
	<h2>年龄大于10的学生的个数：{{ store.getters.getStudentAgeBeyond10Length }}</h2>
	<!-- 自定义年龄，通过调用函数，传入实参完成。getStudentBeyondAge返回的是一个函数，然后添加括号传入参数并且调用这个函数 -->
	<h2>年龄大于20的学生：{{ store.getters.getStudentBeyondAge(20) }}</h2>
</template>

<style scoped></style>
